<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      #pwd {
        padding-right: 55px;
        height: 33px;
        width: 720px;
        padding: 0 10px;
        box-sizing: border-box;
      }

      #keyboard_Box,
      #keyboard_Box li {
        list-style: none;
        margin: 0;
        padding: 0;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      #keyboard_Box {
        width: 720px;
        height: auto;
        border-radius: 0.05em;
        display: none;
        box-sizing: border-box;
        background: #bed8d1;
        padding: 12px;
        box-sizing: border-box;
      }

      #keyboard_Box li {
        position: relative;
        font-family: arial, "Vrinda";
        width: 45px;
        height: 45px;
        line-height: 45px;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 0.2em;
        font-weight: 600;
        display: inline-block;
        text-align: center;
        font-size: 26px;
        vertical-align: text-top;
        margin-right: 0.4em;
        margin-bottom: 10px;
        color: #266ada;
        box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.5);
        cursor: pointer;
        position: relative;
        overflow: visible;
        text-shadow: -1px 1px 4px rgb(111, 102, 102);
      }

      #keyboard_Box li:active {
        box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.5);
        top: 0.08em;
        color: #da4026;
        background-color: rgba(8, 148, 243, 0.63);
      }

      #keyboard_Box .com {
        width: 130px;
      }
    </style>
  </head>
  <body>
    <h2>jQuery虚拟键盘</h2>
    <div style="position: relative" class="inputBox">
      <input type="text" id="pwd" class="form-control" value="" />
    </div>
    <ul id="keyboard_Box" class="keyboard_Box" style="display: block"></ul>

    <script
      type="application/javascript"
      src="../static/plugins/jquery/jquery.js"
    ></script>
    <script>
      $(function () {
        $("#keyboard_Box").html(
          '<li class="list">1</li>' +
            '<li class="list">2</li>' +
            '<li class="list">3</li>' +
            '<li class="list">4</li>' +
            '<li class="list">5</li>' +
            '<li class="list">6</li>' +
            '<li class="list">7</li>' +
            '<li class="list">8</li>' +
            '<li class="list">9</li>' +
            '<li class="list">0</li>' +
            '<li class="com" id="clear">清空</li>' +
            '<li class="list toLowerCase">q</li>' +
            '<li class="list toLowerCase">w</li>' +
            '<li class="list toLowerCase">e</li>' +
            '<li class="list toLowerCase">r</li>' +
            '<li class="list toLowerCase">t</li>' +
            '<li class="list toLowerCase">y</li>' +
            '<li class="list toLowerCase">u</li>' +
            '<li class="list toLowerCase">i</li>' +
            '<li class="list toLowerCase">o</li>' +
            '<li class="list toLowerCase">p</li>' +
            '<li class="com" id="del">←</li>' +
            '<li class="list toLowerCase">a</li>' +
            '<li class="list toLowerCase">s</li>' +
            '<li class="list toLowerCase">d</li>' +
            '<li class="list toLowerCase">f</li>' +
            '<li class="list toLowerCase">g</li>' +
            '<li class="list toLowerCase">h</li>' +
            '<li class="list toLowerCase">j</li>' +
            '<li class="list toLowerCase">k</li>' +
            '<li class="list toLowerCase">l</li>' +
            '<li class="list toLowerCase">z</li>' +
            '<li class="com" id="shift">转为大写</li>' +
            '<li class="" style="visibility: hidden;"></li>' +
            '<li class="" style="visibility: hidden;"></li>' +
            '<li class="" style="visibility: hidden;margin:0;"></li>' +
            '<li class="list toLowerCase">x</li>' +
            '<li class="list toLowerCase">c</li>' +
            '<li class="list toLowerCase">v</li>' +
            '<li class="list toLowerCase">b</li>' +
            '<li class="list toLowerCase">n</li>' +
            '<li class="list toLowerCase">m</li>' +
            "</ul>"
        );

        //点击虚拟键盘上的字母，输入框获取相应的值
        //定义一个数组，用来存放点击的字母
        var attr = [];
        $("#keyboard_Box .list").on("click", function () {
          //判断输入框是否输入数据
          if ($("#pwd").val() === "") {
            $("#pwd").val("");
            attr = [];
          }

          var val = $(this).html();
          attr.push(val);
          for (var i = 0; i < attr.length; i++) {
            $("#pwd").val(attr);
            var s = $("#pwd").val();
            s = s.replace(/,/g, "");
            $("#pwd").val(s);
          }
        });

        //清空
        $("#clear").click(function () {
          $("#pwd").val("");
          attr = [];
        });

        //大小写转换
        $("#shift").on("click", function () {
          setCapsLock("#shift");
        });
        //0表示大写，1表示小写
        var setCapsLockValue = 0;

        function setCapsLock(o) {
          if (setCapsLockValue === 0) {
            setCapsLockValue = 1;
            $(o).html("转化大写");
            /*
             * $('.toLowerCase')表示要遍历的集合
             * index选择器的 index 位置
             * element - 当前的元素（也可使用 "this" 选择器）
             * */
            $.each($(".toLowerCase"), function (index, element) {
              //大写
              $(element).html($(element).html().toUpperCase());
            });
          } else {
            setCapsLockValue = 0;
            $(o).html("转化小写");
            $.each($(".toLowerCase"), function (index, element) {
              //小写
              $(element).html($(element).html().toLowerCase());
            });
          }
        }

        //退格键
        $("#del").on("click", function () {
          attr.splice(1, attr.length);
        });
      });
    </script>
  </body>
</html>
